<template>
  <div class="common-layout">
    <el-container>
      <el-header> <Hearder/></el-header>
      <el-container class="main-container">
        <el-aside width="auto" style=" z-index: 99;margin-top: -55px;" v-show="windowWidth > 992">
          <div class="navCebian">
            <el-radio-group v-model="isCollapse" style="margin-bottom:60px;">
              <el-radio-button :value="false">展开</el-radio-button>
              <el-radio-button :value="true">折叠</el-radio-button>
            </el-radio-group>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
            >
              <template v-for="item in navList" :key="item.id">
                <el-sub-menu
                    v-if="item.children && item.children.length"
                    :index="`/admin`+item.router"
                >
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>{{ item["name" + language] }}</span>
                  </template>
                  <template v-for="subItem in item.children" :key="subItem.id">
                    <el-sub-menu
                        v-if="subItem.children && subItem.children.length"
                        :index="`/admin`+subItem.router" @click="setActive(item.id)"
                    >
                      <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{ subItem["name" + language] }}</span>
                      </template>
                      <template v-for="subSubItem in subItem.children" :key="subSubItem.id">
                        <el-menu-item :index="`/admin`+subSubItem.router" @click="setActive(item.id)">
                          <el-icon><location /></el-icon>
                          <span>{{ subSubItem["name" + language] }}</span>
                        </el-menu-item>
                      </template>
                    </el-sub-menu>
                    <el-menu-item v-else :index="`/admin`+subItem.router" @click="setActive(item.id)">
                      <el-icon><location /></el-icon>
                      <span>{{ subItem["name" + language] }}</span>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
                <el-menu-item v-else :index="`/admin`+item.router" @click="setActive(item.id)">
                  <el-icon><location /></el-icon>
                  <span>{{ item["name" + language] }}</span>
                </el-menu-item>
              </template>
              <el-menu-item index="/admin/message">
                <el-icon><Message /></el-icon>
                <span>查看留言</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-container>
          <el-main :class="windowWidth <= 992 ? '' : {'el-aside-collapsed': isCollapse && windowWidth > 992}">
            <router-view v-slot="{ Component }">
              <keep-alive include="caseVue,newVue,ucaseVue,UnewVue">
                <component :is="Component"></component>
              </keep-alive>
            </router-view>
<!--            <p>
              tjrhirtoitroritritrotiusjoiutrhjktdnjk
            </p>
            <p>
              tjrhirtoitroritritrotiusjoiutrhjktdnjk
            </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>            <p>
            tjrhirtoitroritritrotiusjoiutrhjktdnjk
          </p>-->
          </el-main>
          <el-footer  v-if="route.path === '/admin'" :class="windowWidth <= 992 ? '' : {'el-aside-collapsed': isCollapse && windowWidth > 992}">
            <Footer/>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts" >
import {getCurrentInstance, onActivated, onMounted, onUnmounted, ref, watch} from 'vue';
import {listNavMenu} from "../api/index.js";
import Hearder from "../components/index/Hearder.vue";
import Footer from "../components/index/Footer.vue";
import {onBeforeRouteLeave, useRoute} from "vue-router";
import {Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'

const activeItem = ref(null); // 跟踪当前激活菜单项
const route = useRoute();
const globalLanguage = getCurrentInstance().appContext.config.globalProperties.globalLanguage;
const language = ref(globalLanguage.languageSuffix);
const windowWidth = ref(window.innerWidth); // 保存当前窗口宽度

const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onMounted(() => {
  // 初始化 windowWidth
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
  getNavList()
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
// 菜单折叠状态
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//监听侧边栏折叠状态
watch(isCollapse, (newVal) => {
  const mainContent = document.querySelector('.el-main');
  const footerContent = document.querySelector('.el-footer');
  if (mainContent && footerContent) {
    mainContent.classList.toggle('el-aside-collapsed', newVal);
    footerContent.classList.toggle('el-aside-collapsed', newVal);
  }
});
// 监听windowWidth变化，当windowWidth小于992时，设置isCollapse为true
watch(windowWidth, (newVal) => {
  if (newVal <= 992) {
    isCollapse.value = true;
  }
});
//动态路由
const navList = ref([])
const getNavList = async () => {
  const response = await listNavMenu();
  navList.value = response.navList; // 获取导航列表
}
const setActive = (id) => {
  activeItem.value = id; // 设置激活的菜单项
};


</script>

<style scoped>
.main-container{
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  min-height: auto;
}
.navCebian{
  position: fixed;
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}
.el-main,.el-footer {
  transition: margin-left 0.3s; /* 平滑过渡动画 */
  margin-left: 260px; /* 当侧边栏展开时，根据实际情况调整 */
}
.el-footer {
  margin-top: 50px;
}
.el-main.el-aside-collapsed ,
.el-footer.el-aside-collapsed {
  margin-left: 64px; /* 当侧边栏折叠时，根据实际情况调整 */
}
/* 当windowWidth大于992时，且侧边栏折叠时 */
@media (min-width: 993px) {
  .el-main.el-aside-collapsed, .el-footer.el-aside-collapsed {
    margin-left: 64px;
  }
}
/* 当windowWidth小于992时，重置el-main的左边距 */
@media (max-width: 992px) {
  .el-main, .el-footer {
    margin-left: 0 !important;
  }
}
</style>
